import React, { Component } from 'react';
import { connect } from 'react-redux';
import _ from 'underscore';
import { SortableContainer, SortableElement, arrayMove } from 'react-sortable-hoc';
import Profile from '../../common/profile-for-table';
import { actions } from '../action/action';
import { ajax, merge } from '../../helper/helper';
import { Button, Modal } from 'antd';
import table from '../../charts/table';
import { ContentHeader } from '../../wrapper';
import { workflowListTh } from '../static/index';


let workflowOptions = {
    title: '任务模板列表',
    limit: 6,
    maxPageCount: 50,
    thead: workflowListTh,
    pagebar: true,
    download: false,
    setting: '#/workflow?listSetting=true',
    beforeRender: function (data, options) {
        return [
            <Profile
                data={{
                    id: data.id,
                    name: data.name
                }}
                options={{
                    route: '#detail?id='
                }} />,
            // <Type data={data} />,
            // <Scope data={data} />,
            // <Criteria data={data} />,
            // <Actions data={data} />,
            <CreatedTimestamp data={data} />,
            // <UpdateTimestamp data={data} />,
            <Author data={data} />
        ]
    },
    trigger: []
}


class WorkflowManage extends Component {

    render() {
        const { triggerAddWorkflow, isAddWorkflow } = this.props;
        const listSetting = this.props.location.query.listSetting ? true : false;

        return (
            <div className="workflow">
                <ContentHeader title="销售任务模板" icon="report" sprite="standard-sprite" iconClassName="slds-icon-standard-report" subtitle="">
                    <Button type="primary" icon="plus" >增加任务模板</Button>
                </ContentHeader>
                <div className="content">
                    <WorkflowList options={workflowOptions} />
                </div>
                <Modal visible={listSetting} onCancel={() => { history.back() }} footer={[
                    <Button key="back" type="primary" size="large" onClick={() => history.back()}>关闭</Button>
                ]}>
                    <_PostListSetting />
                </Modal>
                {
                    isAddWorkflow ? <_NewWorkflow triggerAddWorkflow={triggerAddWorkflow} /> : ''
                }
            </div>
        );
    }
}

const _WorkflowManage = connect(
    state => {
        return {
            isAddWorkflow: state.newWorkflow.isAddWorkflow
        }
    },
    dispatch => {
        return {
            triggerAddWorkflow: () => {
                dispatch({
                    type: 'trigger-add-workflow'
                });
            }
        }
    }
)(WorkflowManage);


const WorkflowList = connect(
    state => {
        return state.workflowList;
    },
    dispatch => {
        return {
            getData: (params) => {
                actions.workflowListSetPageIndex(dispatch, params);
                actions.workflowListRenderData(dispatch, params);
                actions.workflowListRequest(dispatch, params);
            }
        }
    }
)(table);


class PostListSetting extends Component {
    render() {
        const { options, chosen, onChange } = this.props;

        return <div className="modal-body">
            {options.map((i, index) => {
                const isChecked = _.contains(chosen, index);
                return <label key={index} style={{ marginRight: 20 }}>
                    <input type="checkbox" checked={isChecked} onChange={() => onChange(isChecked ? _.without(chosen, index) : _.union(chosen, [index]))} /> {i.name}
                </label>
            })}
        </div>
    }
}

const _PostListSetting = connect(
    function (state) {
        return {
            options: workflowListTh,
            chosen: state.workflowList.chosen
        }
    },
    function (dispatch) {
        return {
            onChange: (order) => dispatch({
                type: 'workflow-list-set-chosen',
                val: _.sortBy(order)
            })
        }
    }
)(PostListSetting)



class Type extends Component {

    render() {
        const type = this.props.data.type;
        return <div className="preview-media-limit preview-media-limit-group">
            <p> {type} </p>
        </div>
    }
}

class Scope extends Component {

    render() {
        const scope = this.props.data.scope;
        return <div className="preview-media-limit preview-media-limit-group">
            <p> {scope} </p>
        </div>
    }
}

class Criteria extends Component {

    render() {
        const criteria = this.props.data.criteria;
        return <div className="preview-media-limit preview-media-limit-group">
            <p> {criteria} </p>
        </div>
    }
}

class Actions extends Component {

    render() {
        const actions = this.props.data.actions;
        return <div className="preview-media-limit preview-media-limit-group">
            <p>无</p>
        </div>
    }
}

class CreatedTimestamp extends Component {

    render() {
        const createTimestamp = this.props.data.createTimestamp;
        return <div className="preview-media-limit preview-media-limit-group">
            <p>{createTimestamp}</p>
        </div>
    }
}


class UpdateTimestamp extends Component {

    render() {
        const updateTimestamp = this.props.data.updateTimestamp;
        return <div className="preview-media-limit preview-media-limit-group">
            <p>{updateTimestamp}</p>
        </div>
    }
}

class Author extends Component {

    render() {
        const author = this.props.data.author;
        return <div className="preview-media-limit preview-media-limit-group">
            <p>{author}</p>
        </div>
    }
}







export default _WorkflowManage;